<template>
  <div class="">

    <el-card class="box-card" style="margin-top: 15px;">

      <h3>{{chi_app_name}}</h3>
      <div style="margin: 10px 0;">
        <router-link :to="{name:'xadmin_add'}">
          <el-button type="primary" size="mini">添加数据</el-button>
        </router-link>
      </div>


      <el-table
        :data="data_list"
        border
        style="width: 100%, overflow: auto;"
        :highlight-current-row="true"
        @selection-change="handleSelectionChange">
        size="mini"
        >
        <el-table-column
          type="selection"
          width="39">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in header_list" :key="index"
          :prop="item.field"
          :label="item.title"
          align="center"
          :width="index == 0?'70':''"
          sortable>
<!--          <el-switch v-if="item.type == 'Boolean'"
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch> -->
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>



  </div>
</template>

<script>
  export default{
    name:"",
    data(){
      return{
        app_name:"",
        chi_app_name:"请刷新一下",
        label_name:"",
        index_url:"",

        header_list:[],
        data_list: [],
      }
    },
    beforeRouteUpdate(to,from,next){
      next()
      console.log(this.$route.params)
      // this.app_name = this.$route.params.app_name
      // http://127.0.0.1:8002/xadmin/all_user/student/
      this.getModelInfo()

    },
    methods:{
      // 编辑按钮实现
      handleEdit(index, row) {
        console.log(index, row);
        this.$router.push({
          name:"xadmin_change",
          params:{id:row.id}
        })

      },

      //删除按钮实现
      handleDelete(index, row) {
        let _this = this
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // http://127.0.0.1:8002/xadmin/all_user/student/1/delete/
          this.$axios.get(_this.index_url+'xadmin/'+_this.app_name+'/'+_this.label_name+'/'+ row.id +'/delete/?label_name=' + _this.label_name + '&app_name=' + _this.app_name).then(function(res){
            console.log(res)
            if(res.data.code == 2000){
              _this.getModelInfo()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'info',
                message: '删除失败!'
              });
            }
          })



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },

      // 删选按钮
      handleSelectionChange(val) {
        console.log(val)
        // this.multipleSelection = val;
      },

      // 从后台获取信息
      getModelInfo(){
        let app_id = this.$route.params.app_id
        this.app_name = this.$route.params.app_name
        this.label_name = this.$route.params.label_name
        let app_name = this.$route.params.app_name
        let label_name = this.$route.params.label_name
        // 去后台获取本APP信息
        let _this = this
        this.$axios.get(this.$url + 'app_info/' + app_id + '/',{
          headers: {
            'token': this.$store.state.token,
            'Content-Type':'application/json'
          },
        }).then(function (res) {
          // console.log("===",res);
          if(res.status < 300){
            let index_url = res.data.index_url
            _this.index_url = index_url
            //  获取到主页路由，象主页发起请求

            _this.$axios.get(index_url + 'xadmin/' + app_name + '/' + label_name + '/').then(function(res){
              // console.log(res)
              if( res.data.code == 2000 ){
                const loading = _this.$loading({
                  lock: true,
                  text: '数据加载中，请稍后...',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                });

                _this.chi_app_name = res.data.data.model_name
                _this.header_list = res.data.data.header_list
                _this.data_list = res.data.data.data_list

                setTimeout(() => {
                  loading.close();
                }, 1000);
              }
            })

          }else{
            _this.$message.error("服务器发生错误，请重试...")
          }

        })




      }
    },
    mounted() {
      this.getModelInfo()
    }
  }
</script>

<style>
  .el-button+.el-button {
      margin: 0 3px;
  }
  .el-button {
      margin: 0 3px;
  }

</style>
